<template>
	<view style="margin-top: 20upx;" v-if="list.length > 0">
		<home-title @more="goMoreCoupon" title="新人大礼包" :showMore="true"></home-title>
		<view class="wrapper">
			<u-scroll-list :indicator="false">
				<view class="couponItem" v-for="(item, index) in list" :key="item.businessId">
					<view class="couponInfo">
						<view class="type" :class="{active:businessNo == 3}">{{item.couponName}}</view>
						<view class="discount" :class="{active:businessNo == 3}"
							@click="showCouponName(item.preferentialInfo)">{{item.preferentialInfo}}</view>
						<view class="give" :class="{active:businessNo == 3}" @click="giveCoupon(item)">
							{{item.isReceive == 1 ? '已领取' : '立即领取'}}</view>
					</view>
					<image class="couponImg"
						:src="businessNo == 3 ? '../../../static/home/haocheCouponBg.png' : '../../../static/home/coupon.png'"
						mode=""></image>
				</view>
			</u-scroll-list>
		</view>
	</view>
</template>

<script>
	import homeTitle from '@/components/layout/home-title.vue'
	import {
		homeCoupon,
		receiveCoupons
	} from '@/api/marketing-api.js'
	export default {
		name: 'coupon-view',
		components: {
			homeTitle
		},
		data() {
			return {
				list: []
			}
		},
		computed: {
			businessNo() {
				return this.$store.state.order.businessNo;
			},
			isLogin() {
				return this.$store.state.user.isLogin;
			},
			tenantId() {
				return this.$store.state.user.tenantId;
			},
			memberNo() {
				return this.$store.state.user.userInfo.memberNo;
			}
		},
		props: {

		},
		mounted() {

			uni.$on('loginRefresh', () => { //登录成功后刷新数据
				this.getCouponList();
			})
			uni.$on('refreshCouponData', () => { //优惠券列表领取优惠券成功回调
				this.getCouponList();
			})
			this.getCouponList();
		},
		methods: {
			getCouponList() {
				homeCoupon({
					tenantId: this.tenantId,
					businessNo: this.$store.state.order.businessNo,
					memberNo: this.memberNo
				}).then(res => {
					this.list = res.data;
				})
			},
			showCouponName(name) {
				uni.showToast({
					title: name,
					icon: 'none'
				})
			},
			giveCoupon(item) {
				console.log('优惠券');
				if (this.isLogin) {
					if (item.isReceive == 2) {
						receiveCoupons({
							businessId: item.businessId
						}).then(res => {
							if (res.code == 200) {
								this.$u.toast("领取成功");
								this.getCouponList();
							}
						})
					}

				} else {
					console.log('去登录');
					uni.navigateTo({
						url: '/pages/login/login',
						success() {

						},
						fail(error) {
							console.log(error);
						}
					})
				}
			},
			goMoreCoupon() {
				console.log('进来了');
				uni.navigateTo({
					url: '/pagesB/coupon/home-moreCoupon'
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 0 20upx;
	}

	.couponItem {
		position: relative;
		width: 165upx;
		height: 190upx;

		&+& {
			margin-left: 30upx;
		}

		.couponInfo {
			height: 100%;
			width: 100%;
			position: absolute;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			.type {
				color: #48321A;
				font-size: 20upx;
				position: relative;
				left: -28upx;
				top: -15upx;

				&.active {
					color: #40465E;
				}
			}

			.discount {
				color: $text-color-ff;
				font-size: 26upx;
				position: relative;
				left: 5upx;
				right: 5upx;
				top: -10upx;
				white-space: nowrap;
				text-align: center;
				align-self: center;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;

				&.active {
					color: #FFD39F;
				}
			}

			.give {
				color: $text-color-ff;
				font-size: 22upx;
				position: relative;
				bottom: 2upx;

				&.active {
					color: #9296AD;
				}
			}
		}

		.couponImg {
			width: 165upx;
			height: 190upx;
			z-index: -1;
		}

	}
</style>
